<template>
  <div class="box">
    <div class="sonBox">
       <!-- 新增或修改发布频率预警对话框 -->
       <h2>通知公告发布频率预警配置</h2>
    <!-- <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body> -->
      <el-form v-loading="loading" ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="提醒周期" prop="cycleDays">
          <el-input v-model="form.cycleDays" clearable placeholder="请输入提醒周期">
            <template slot="suffix">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="办理期限" prop="deadlineDays">
          <el-input v-model="form.deadlineDays" clearable placeholder="请输入办理期限">
            <template slot="suffix">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="提醒角色" prop="warnRole">
          <el-select v-model="form.warnRole" clearable multiple placeholder="请选择 角色" style="width:100%" >
          <el-option
            v-for="item in roleOptions"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
            :disabled="item.status == 1">
          </el-option>
        </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="isShows" @click="handleAdd(1)">保 存</el-button>
      </div>
    <!-- </el-dialog> -->
    </div>
    <div class="sonBox newBox">
       <!-- 新增或修改发布频率预警对话框 -->
       <h2>新闻发布频率预警配置</h2>
    <!-- <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body> -->
      <el-form v-loading="loading" ref="formNew" :model="formNew" :rules="rulesNew" label-width="80px">
        <el-form-item label="提醒周期" prop="cycleDays">
          <el-input v-model="formNew.cycleDays" clearable placeholder="请输入提醒周期">
            <template slot="suffix">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="办理期限" prop="deadlineDays">
          <el-input v-model="formNew.deadlineDays" clearable placeholder="请输入办理期限">
            <template slot="suffix">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="提醒角色" prop="warnRole">
          <el-select v-model="formNew.warnRole" clearable multiple placeholder="请选择 角色" style="width:100%" >
          <el-option
            v-for="item in roleOptions"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
            :disabled="item.status == 1">
          </el-option>
        </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="isNewShows" @click="handleAdd(2)">保 存</el-button>
      </div>
    <!-- </el-dialog> -->
    </div>
   
  </div>
</template>

<script>
import {
  listFrequencyWarningSet,
  getFrequencyWarningSet,
  delFrequencyWarningSet,
  addFrequencyWarningSet,
  updateFrequencyWarningSet
} from "@/api/information/frequencyWarningSet/frequencyWarningSet.js";
import { listRole } from "@/api/system/role";
// import { setStorageItem, getStorageItem } from "@/utils/storage.js";
// import Sortable from "sortablejs";
export default {
  name: "FrequencyWarningSet",
  data() {
    return {
      isShows: true,
      isNewShows: true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 发布频率预警表格数据
      frequencyWarningSetList: [],
      // 角色数据
      roleOptions:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cycleDays: null,
        deadlineDays: null,
        warnRole: null,
        type: null,
        tenantId: null
      },
      // 列信息
      // columns: [
      //   {
      //     key: -1,
      //     label: "ID",
      //     visible: true,
      //     prop: "id",
      //     htmlType: "input",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 0,
      //     label: "新闻标题",
      //     visible: true,
      //     prop: "title",
      //     htmlType: "input",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 1,
      //     label: "提醒周期",
      //     visible: true,
      //     prop: "cycleDays",
      //     htmlType: "input",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 2,
      //     label: "办理期限",
      //     visible: true,
      //     prop: "deadlineDays",
      //     htmlType: "input",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 3,
      //     label: "提醒角色:1-办公室人员,2-新闻编辑人员",
      //     visible: true,
      //     prop: "warnRole",
      //     htmlType: "input",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 4,
      //     label: "提醒类型:1-新闻,2-通知公告",
      //     visible: true,
      //     prop: "type",
      //     htmlType: "select",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 5,
      //     label: "状态：0-未发布 1-已发布",
      //     visible: true,
      //     prop: "status",
      //     htmlType: "radio",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 6,
      //     label: "创建者",
      //     visible: true,
      //     prop: "createBy",
      //     htmlType: "input",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 7,
      //     label: "创建时间",
      //     visible: true,
      //     prop: "createTime",
      //     htmlType: "datetime",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 8,
      //     label: "更新者",
      //     visible: true,
      //     prop: "updateBy",
      //     htmlType: "input",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 9,
      //     label: "更新时间",
      //     visible: true,
      //     prop: "updateTime",
      //     htmlType: "datetime",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 10,
      //     label: "备注",
      //     visible: true,
      //     prop: "remark",
      //     htmlType: "textarea",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 11,
      //     label: "租户ID",
      //     visible: true,
      //     prop: "tenantId",
      //     htmlType: "input",
      //     dictType: "",
      //     align: "center"
      //   },
      //   {
      //     key: 0,
      //     label: `操作`,
      //     visible: true,
      //     prop: "operation",
      //     htmlType: "operation",
      //     align: "center",
      //     width: "200",
      //     className: "fixed-width"
      //   }
      // ],
      // 表单参数
      form: {
        cycleDays: null,
        deadlineDays: null,
        warnRole: [],
        id: 1,
        type:1
      },
      formNew: {
        cycleDays: null,
        deadlineDays: null,
        warnRole: [],
        id: 2,
        type:2
      },
      // 表单校验
      rules: {
        cycleDays: [{ required: true, message: "提醒周期不能为空", trigger: "blur" }],
        deadlineDays: [{ required: true, message: "办理期限不能为空", trigger: "blur" }],
        warnRole: [{ required: true, message: "提醒角色不能为空", trigger: "change" }],
      },
      rulesNew: {
        cycleDays: [{ required: true, message: "提醒周期不能为空", trigger: "blur" }],
        deadlineDays: [{ required: true, message: "办理期限不能为空", trigger: "blur" }],
        warnRole: [{ required: true, message: "提醒角色不能为空", trigger: "change" }],
      }
    };
  },
  computed: {
    newForm() {
      return JSON.parse(JSON.stringify(this.form))
    },
    newFormNew() {
      return JSON.parse(JSON.stringify(this.formNew))
    }
  },
  watch:{
    newForm:{
      handler(val, oldVal) {
        if (oldVal.cycleDays == null && oldVal.deadlineDays == null && oldVal.warnRole.length == 0 ) {
          this.isShows = true
        } else {
          if (val.cycleDays !== oldVal.cycleDays || val.deadlineDays !== oldVal.deadlineDays || val.warnRole.sort().toString() !== oldVal.warnRole.sort().toString()) {
            this.isShows = false
          } else {
          this.isShows = true
        }
        }
      },
      deep: true,
      immediate:false
    },
    newFormNew:{
      handler(val, oldVal) {
        if (oldVal.cycleDays == null && oldVal.deadlineDays == null && oldVal.warnRole.length == 0 ) {
          this.isNewShows = true
        } else {
          if (val.cycleDays !== oldVal.cycleDays || val.deadlineDays !== oldVal.deadlineDays || val.warnRole.sort().toString() !== oldVal.warnRole.sort().toString()) {
            this.isNewShows = false
          } else {
          this.isNewShows = true
        }
        }
      },
      deep: true,
      immediate:false
    },
  },
  created() {
    // let data = getStorageItem(this.$options.name);
    // if (data) {
    //   this.columns = data;
    // }
    this.getRoleOptions()
    this.getList();
    this.getListNew()
  },
  mounted() {
    // this.columnDrop();
    
  },
  methods: {
    //列拖拽
    // columnDrop() {
    //   const wrapperTr = this.$refs.frequencyWarningSetTable.$el.querySelector(
    //     ".el-table__header-wrapper tr"
    //   );
    //   this.sortable = Sortable.create(wrapperTr, {
    //     animation: 180,
    //     delay: 30,
    //     // draggable: ".drag",
    //     onEnd: evt => {
    //       if (evt.oldIndex === evt.newIndex) return;
    //       const oldItem = this.columns[evt.oldIndex];
    //       const newItem = this.columns[evt.newIndex];
    //       this.$set(this.columns, evt.newIndex, oldItem);
    //       this.$set(this.columns, evt.oldIndex, newItem);
    //       setStorageItem(this.$options.name, this.columns);
    //     }
    //   });
    // },
    // dataChange(data) {
    //   for (let item in this.columns) {
    //     const key = this.columns[item].key;
    //     this.columns[item].visible = !data.includes(key);
    //   }

    //   setStorageItem(this.$options.name, this.columns);
    // },
    // changeColumns(data) {
    //   this.columns = data;
    //   setStorageItem(this.$options.name, data);
    //   this.isShow = !this.isShow;
    // },
    getRoleOptions() {
      if (!this.roleOptions || this.roleOptions.length <= 0) {
        listRole().then(response => this.roleOptions = response.rows);
      }
    },
    /** 查询发布频率预警列表 */
    getList() {
      this.loading = true;
      let dataQuery = {
        id: 1,
        type:1,
      } 
      listFrequencyWarningSet(dataQuery).then(response => {
        this.form = response.data;
        if (response.data.warnRole) {
          this.form.warnRole = response.data.warnRole.split(',')
        }
        this.isShows = true
        this.loading = false
      });
    },
    getListNew() {
      this.loading = true;
      let dataQuery = {
        id: 2,
        type:2,
      } 
      listFrequencyWarningSet(dataQuery).then(response => {
        this.formNew = response.data;
        if (response.data.warnRole) {
          this.formNew.warnRole = response.data.warnRole.split(',')
        }
        this.isNewShows = true
        this.loading = false
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        title: null,
        cycleDays: null,
        deadlineDays: null,
        warnRole: null,
        type: null,
        status: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        tenantId: null
      };
      this.resetFormData("form");
    },
    /** 保存按钮操作 */
    handleAdd(type) {
      if (type == 1) {
        this.$modal
        .confirm('是否确认要修改通知公告发布频率预警配置吗？')
         .then(() => {
          this.submitForm()
        })
        .catch(() => {});
      } else {
        this.$modal
        .confirm('是否确认要修改新闻发布频率预警配置吗？')
         .then(() => {
          this.submitFormNew()
        })
        .catch(() => {});
      }
       
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getFrequencyWarningSet(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改发布频率预警";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateFrequencyWarningSet({ ...this.form,warnRole:this.form.warnRole.toString() }).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.isShows = true
              this.open = false;
              this.getList();
            });
          } else {
            addFrequencyWarningSet({ ...this.form,warnRole:this.form.warnRole.toString() }).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    submitFormNew() {
      this.$refs["formNew"].validate(valid => {
        if (valid) {
          if (this.formNew.id != null) {
            updateFrequencyWarningSet({ ...this.formNew,warnRole:this.formNew.warnRole.toString() }).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.isNewShows = true
              this.open = false;
              this.getList();
            });
          } else {
            addFrequencyWarningSet({ ...this.formNew,warnRole:this.formNew.warnRole.toString() }).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.box {
  // top: -30px;
  margin: 40px auto;
  width: 50%;
  }
  .sonBox {
    // margin: 15px auto;
    text-align: center;
  }
  .newBox {
    margin-top: 30px;
  }
</style>